<template>
  <div class="container" @click="faulttext.fault()">
    <p class="faulttext">Error</p>
    <p class="faulttext">Error</p>
    <p class="faulttext">Error</p>
    <p class="faulttext">Error</p>
    <p class="faulttext">Error</p>
  </div>
</template>

<script setup lang="ts">
import { ref,reactive, onMounted } from "vue";

const faulttext = reactive({
  player: {},
  texts: <Element[]> [],
  init() {
    this.texts = [...document.querySelectorAll(".faulttext")] as HTMLElement[];
  },
  fault() {
    clearInterval(faulttext.player as number);
    // 清除定时器
    setTimeout(() => {
      clearInterval(faulttext.player as number);
      this.texts.forEach((text) => {
        text.classList.remove("faulttext_fault");
        text.style.transform = ''
        text.style.clipPath = ''
      });
    }, 400);
    this.player = setInterval(() => {
      this.texts.forEach((text) => {
        text.classList.add("faulttext_fault");
        text.style.transform = `translate(${Math.random() * 40 - 20}%,${
            Math.random() * 40 - 20
        }%)`;
        const x = Math.random() * 100;
        const y = Math.random() * 100;
        const w = Math.random() * 50 + 50;
        const h = Math.random() * 50 + 10;
        text.style.clipPath = `polygon(${x}% ${y}%,${x + w}% ${y}%,${x + w}% ${
            y + h
        }%,${x}% ${y + h}%)`;
        // 错位图块，clipPath 切割可视区域 polygon多边形 填写坐标
      });
    });
  },
});

onMounted(() => {
  faulttext.init();
});
</script>

<style lang="scss" scoped>
.container {
  background: #000;
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.faulttext {
  position: absolute;
  font-family: Impact, sans-serif;
  font-size: 5rem;
  color: #fff;
  letter-spacing: 0.5rem;
  user-select: none;
}
.faulttext_fault::before,
.faulttext_fault::after {
  content: "Error";
  position: absolute;
  top: 0;
  left: 0;
  mix-blend-mode: screen;
  // 屏幕混合模式
}
.faulttext_fault::after {
  color: #ff0000;
  transform: translateX(2%);
}
.faulttext_fault::before {
  color: #0000ff;
  transform: translateX(-2%);
}
</style>